<template>
	<view class="content">
		<view style="padding:10px;">
			<u--input
				placeholder="查找订单"
				prefixIcon="search"
				clearable
				style="background: white;"
				prefixIconStyle="font-size: 22px;color: #eee"
				v-model="param.keyword"
				@change="changeInput"
			></u--input>	
			<u-tabs :list="classList" @click="tabClick" :current="classList.findIndex(item => item.id === currentTab)">
			</u-tabs>
			<view v-if="ordersData.length == 0">
				<u-empty mode="order"></u-empty> 
			</view>
			<nuoyu-card
				v-else
				:main_color="themeColor.main_color"
				v-for="(item,index) in ordersData"
				:title="item.order_type | order_type_set" 
				border
			>
				<view @click="toPath(item,index)" v-if="item.business_id && storeList.length>0">
					<text>店  铺</text><text >{{store_set(item.business_id)}}</text>
				</view>
				<view @click="toPath(item,index)" v-else>
					<text>店  铺</text><text >公共商品</text>
				</view>
				<view >
					<text>订 单 ID</text><text @click="fuzhi(item.order_id)">{{item.order_id}}</text>
				</view>
				<view v-if="item.goods_sku">
					<text>规 格 ID</text><text @click="fuzhi(item.skuId)">{{item.goods_sku.skuId}}</text>
				</view>
				  
				<view @click="toPath(item,index)" v-if="item.goods_sku">
					<text>规 格 名</text><text>{{item.goods_sku.skuName}}</text>
				</view>
			    <view @click="toPath(item,index)" style="display: flex;">
					<div style="width: 180rpx;">
						商品名称
					</div>
					<div>
						{{item.goodsName}}
					</div>
			    </view>
				<view v-if="item.goods_sku" style="display: flex;align-items: center;">
				  <text>规格图片</text> <image @click="PreviewImage(item.goods_sku.skuImage)" style="height: 72rpx;width:64rpx" :src="item.goods_sku.skuImage" mode="aspectFill"></image>
				</view>
				<view v-else style="display: flex;align-items: center;">
				  <text>商品图片</text> <image @click="PreviewImage(wechatConfig.tencent‌Domain+item.previewUrl)" style="height: 72rpx;width:64rpx" :src="wechatConfig.tencent‌Domain+item.previewUrl" mode="aspectFill"></image>
				</view>
				<view>
				  <text>商品单价</text><text>￥{{JSON.parse(item.goods_info).goodsSkuType=='单规格'?(JSON.parse(item.goods_info).goodsPrice):(item.goods_sku).skuPrice}}</text>
				</view>
				<view v-if="item.payStatus == 3 || item.payStatus == 4 || item.payStatus == 5 ">
				  <text>支付价格</text><text>￥{{item.total_money}}</text>
				</view>
			    <view>
			      <text>购买数量</text><text>{{item.goodsQuantity}}</text>
			    </view>
				<view>
				  <text>支付方式</text><text>{{item.paypal_type | paypal_type_set}}</text>
				</view>
				<view>
				  <text>货物状态</text><text>{{item.payStatus | payStatus_set}}</text>
				</view>
				<view >
				  <text v-if="item.payStatus == 3 || item.payStatus == 4 || item.payStatus == 5 ">购买时间</text>
				  <text v-if="item.payStatus == 1 || item.payStatus == 0  ">下单时间</text>
				  <text>{{item.ctime }}</text>
				</view>
			  </nuoyu-card>		
		</view>
	
	</view>
</template>

<script>
export default{
	data(){
		return{
			wechatConfig:'',
			themeColor:'',
			ordersData:[],
			param:{
				pageSize:10,
				pageNum:1,
				keyword:"",
				payStatus:null,
			},
			storeList:[],
			currentTab: 1,
			classList: [{
				id:1,
			    name: '全部',
				value:10,
			}, {
				id:2,
			    name: '待支付',
				value:1,
			}, {
				id:3,
			    name: '支付中',
				value:2,
			}, {
				id:4,
			    name: '已支付',
				value:3,
			}, {
				id:5,
			    name: '待发货',
				value:4,
			}, {
				id:6,
			    name: '已发货',
				value:5,
			}, {
				id:7,
			    name: '已收货',
				value:6,
			}, {
				id:8,
			    name: '已退款',
				value:7,
			}]
		}
	},
	onReachBottom() { // 当页面触底时触发的方法
		this.param.pageSize += 10;
	    this.getAllOrders(); // 调用加载更多数据的函数
	},
	filters:{
		order_type_set(value){
			if(value == 1){
				return '普通订单'
			}
			if(value == 2){
				return '月卡订单'
			}
			if(value == 3){
				return '补录订单'
			}
			if(value == 4){
				return '积分订单'
			}
			if(value == 5){
				return '余额订单'
			}
		},
		// 支付类型，1微信支付、2支付宝支付、3余额支付、4月卡支付，5.微信,余额,支付宝，6.全部
		paypal_type_set(value){
			if(value == 1){
				return '微信支付'
			}
			if(value == 2){
				return '支付宝支付'
			}
			if(value == 3){
				return '余额支付'
			}
			if(value == 4){
				return '月卡支付'
			}
			if(value == 5){
				return '微信,余额,支付宝'
			}
			if(value == 6){
				return '全部'
			}
			
		},
		// 状态 1.待支付,2.支付中,3.已支付,4.待发货,5.已发货,6.待收货,7.已收货,8.已退款
		payStatus_set(value){
			if(value == 1){
				return '待支付'
			}
			if(value == 2){
				return '支付中'
			}
			if(value == 3){
				return '已支付'
			}
			if(value == 4){
				return '待发货'
			}
			if(value == 5){
				return '已发货'
			}
			if(value == 6){
				return '待收货'
			}
			if(value == 7){
				return '已收货'
			}
			if(value == 8){
				return '已退款'
			}
			if(value == 10){
				return '全部'
			}
		},
		 
	},
	onLoad() {
		this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
		this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
		this.getStore();
		this.getAllOrders();
	},
	methods:{
		select_order(order_id){
			
		},
		toPath(item,index){
			uni.navigateTo({
				url:"/pages/goods/goods_confirm?order_id="+item.order_id
			})
		},
		store_set(business_id){
			for (var i = 0; i < this.storeList.length; i++) {
				if(business_id == this.storeList[i].businessId){
					return this.storeList[i].businessName
					break;
				}
				
			}
			
		},
		changeInput(e){
			this.getAllOrders();
		},
		fuzhi(e){
			this.tui.request("/basic-capi/wechatApi/order/getOrderDetails", "get",{
					order_id:e,
				}).then((res) => {
					console.log(res)
				}).catch((res) => {
					console.log(res)
				})
			
			uni.setClipboardData({
			    data: e, // e是你要保存的内容
			    success: function () {
					uni.showToast({
						title:'复制成功',
						icon:'none'
					})
			    }
			})
		},
		PreviewImage(image){
			uni.previewImage({
			    current: 0, // 当前显示图片的http链接
			    urls: [image] // 需要预览的图片http链接列表
			});
		},
		getStore(){
			this.tui.request("/basic-capi/store/getStore", "get",{
				pageNum:1,
				pageSize:40,
			}).then((res) => {
				if(res.code == 200){
					this.storeList = res.data.list
					 
				}
			}).catch((res) => {
				console.log(res)
			})
		},
		getAllOrders(){
			this.tui.request("/basic-capi/orderList/list","get",this.param).then((res)=>{
				if(res.code == 200){
					this.ordersData = res.data.list
					this.ordersData.forEach((item)=>{
						if(item.goods_sku){
							item.goods_sku = JSON.parse(item.goods_sku)
						}
					})
					console.log("data",this.ordersData)
				}
			})
		},
		tabClick(item) {
			this.param.payStatus = item.value
			this.getAllOrders()
		}
	}
}
</script>

<style>
	.order-list{
		z-index: 1;
	}
</style>